<template>
	<view class="page" :style="type == 1 ? '' : 'padding-top: 134rpx;'">
		<div v-if="type == 1">
			<view class="mapbox">
<!-- 				<view class="operate">
					<text>位置共享</text>
					<text @click="openList">列表显示</text>
				</view>
				<view class="weathera">
					<text>2025-03-11 晴</text>
					<image src="/static/image/travel/goodday.png" mode=""></image>
					<text>31℃/西北风</text>
				</view> -->
				<div>
					
					<!-- <div class="map" style="width: 100%;height: 804rpx;background-color: #eee;"></div> -->
					<map
					  id="test_map2"
					  class="covermapbox"
					  style="width: 100%;height: 804rpx;background-color: #eee;"
					  :show-location="true"
					  show-compass="true"
					  show-location="true"
					>
						<cover-view class="coveroperate">
							<cover-view class="posi">
								位置共享
							</cover-view>
							<cover-view @click="openList" class="lis">
								列表显示
							</cover-view>
						</cover-view>
						<cover-view class="coverweathera">
							<cover-view class="coverweathera-txt">
								2025-03-11 晴
							</cover-view>
							<cover-image class="coverweathera-img" src="/static/image/travel/goodday.png"></cover-image>  
							<cover-view class="coverweathera-txt">
								31℃/西北风
							</cover-view>
						</cover-view>
					</map>
					
					
					<!-- <web-view fullscreen="false" :webview-styles="webConfig" src="/static/test.html">
					</web-view> -->
					
				</div>

			</view>
			<view class="mapcontent">
				<div class="mapcontent-title">
					<text> </text>
				</div>
				<div class="mapcontent-nav">
					<view v-for="(dayItem,dayIndex) in dayList" :key="dayIndex"
					@click="changeDay(dayIndex)"
						:class="currentDay == dayIndex ? 'dayActive' : ''" class="navitem">
						<text class="normal">{{dayItem}}</text>
						<text class="txtactive"></text>
					</view>
				</div>
				<div class="mapcontent-box">
					<div class="mapline"></div>
					
					
					<view class="mapitem" 
					 
					 v-for="(mapItem, mapIndx) in areaList" :key="mapIndx">
						<view class="mapitem-header" 
						@click="changeListIndex(mapIndx)"
						:class="mapIndx == currentListIndex  ? 'listactive' : ''">
							<text class="tips">{{mapIndx + 1}}</text>
							<text class="left" @click="goScenDetail(mapItem, mapIndx)">{{mapItem.title}}</text>
							<view class="right">
								<image src="/static/image/travel/navigation.png" mode=""></image>
								<image src="/static/image/travel/sort.png" mode=""></image>
							</view>
						</view>
						<view class="mapitem-body" v-if="mapIndx !== (areaList.length - 1)" >
							<image style="margin-left: 25rpx;" :src="travelWayMap[mapItem.way]" mode=""></image>
							<text>{{mapItem.time}}</text>
						</view>
					</view>
				</div>
			</view>
			<view class="" style="height: 240rpx;"></view>
		</div>
		<div v-else>
			<div class="topBox">
				<image class="left" src="/static/image/home/logo.png" mode=""></image>
				<div class="right">
					<image src="/static/image/home/zhinanzhen.png" @click="goClock" mode=""></image>
					<image src="/static/image/home/setting.png" @click="goSetting" mode=""></image>
					<image src="/static/image/home/messagepage.png" @click="goPage" mode=""></image>
					
				</div>
			</div>
			<div class="avatorbox">
				<image class="avator" src="/static/image/home/avator.png" mode=""></image>
				<view class="right">
					<text class="top">大地探险家</text>
					<div class="bottom">
						<image src="/static/image/home/rank.png" mode=""></image>
						<text>LV2</text>
					</div>
				</view>
			</div>
			<div class="toptips">
				<div class="left">
					<text class="normal">深圳</text>
					<text class="splite"></text>
					<text class="middle">3天</text>
					<text class="splite"></text>
					<text class="normal">福州</text>
				</div>
				<div class="right" @click="mapshow">
					<image src="/static/image/travel/mapshow.png" mode=""></image>
					<text>地图显示</text>
				</div>
			</div>
			<div class="tipbox">
				<div class="tipbox-nav">
					<view v-for="(dayItem,dayIndex) in dayList"
					 @click="changeDay(dayIndex)"
					 :key="dayIndex"
						:class="currentDay == dayIndex ? 'dayActive' : ''"
						 class="navitem">
						<text class="normal">{{dayItem}}</text>
						<text class="txtactive"></text>
					</view>
				</div>
				<view class="weather1">
					<text>2025-03-11 晴</text>
					<image src="/static/image/travel/goodday.png" mode=""></image>
					<text>31℃/西北风</text>
				</view>

				<div class="mapcontent-box" style="padding-bottom: 20rpx;">
					<div class="mapline"></div>
					<view class="mapitem" v-for="(mapItem, mapIndx) in areaList" :key="mapIndx">
						
						<view  class="mapitem-header" >
							<text class="tips">{{mapIndx + 1}}</text>
							<view class="clockbox" @click="openclockbox">
								<image src="/static/image/travel/clockin.png" mode=""></image>
								<text>打卡</text>
							</view>
							<div class="titlebox">
								<text class="left" @click="goScenDetail">{{mapItem.title}}</text>
							</div>
							<div class="imgs">
								<image src="/static/image/travel/photo1.png" mode=""></image>
								<image src="/static/image/travel/photo1.png" mode=""></image>
								<image src="/static/image/travel/photo1.png" mode=""></image>
								<image src="/static/image/travel/photo1.png" mode=""></image>
								<image src="/static/image/travel/photo1.png" mode=""></image>
							</div>
							<text class="maptips">备注：开放时间 09:00-17:00</text>
						</view>
						<view class="mapitem-body" v-if="mapIndx !== (areaList.length - 1)" >
							<image style="margin-left: 5rpx;" :src="travelWayMap[mapItem.way]" mode=""></image>
							<text>{{mapItem.time}}</text>
						</view>
					</view>
				</div>
				<view class="" style="height: 190rpx;">

				</view>
			</div>

		</div>

		<tabbar selected="1"></tabbar>
	</view>
</template>

<script>
	import qianStep from '../../components/ly-step/ly-step.vue'
	import tabbar from "../../components/tabbar/tabbar.vue";
	import poster from '../../static/image/home/poster.png'
	
	import buxing from '../../static/image/travel/buxing.png'
	import feiji from '../../static/image/travel/feiji.png'
	import huoche from '../../static/image/travel/huoche.png'
	import lunchuan from '../../static/image/travel/lunchuan.png'
	import qiche from '../../static/image/travel/qiche.png'
	import qixing from '../../static/image/travel/qixing.png'
	export default {
		components: {
			tabbar: tabbar,
			qianStep: qianStep
		},
		data() {
			return {
				travelWayMap: {
					'步行': buxing,
					'飞机': feiji,
					'火车': huoche,
					'轮船': lunchuan,
					'汽车': qiche,
					'骑行': qixing,
				},
				
				webConfig: {
					progress: {
						color: '#FF3333'
					},
					position: "static",
					width: '400rpx',
					height: '804rpx'
				},
				currentDay: 0,
				dayList: ['第1天', '第2天', '第3天'],
				areaList: [{
						title: '09:00 ～ 11:00 福建博物馆',
						time: '26分钟',
						way: '汽车'
					},
					{
						title: '09:00 ～ 11:00  冰心故居',
						time: '1小时9分钟',
						way: '飞机'
					},
					{
						title: '09:00 ～ 11:00  水榭戏台',
						time: '12分钟',
						way: '步行'
					},
					{
						title: '09:00 ～ 11:00  水榭戏台2',
						time: '12分钟',
						way: '步行'
					},
				],
				type: 1,
				poster: poster,
				title: 'Hello',
				hasMore: true,
				options: [{
						content: '进贤门',
						time: '08:00-09:00',
					},
					{
						content: '揭阳学宫',
						time: '09:00-12:00',
					},
					{
						content: '罗家老字号青果汁',
						time: '12:00-14:00',
					},
					{
						content: '罗家老字号青果汁',
						time: '12:00-14:00',
					},
				],
				activeDay: 0,
				category: [{
						id: 1,
						name: '智能推荐',
					},
					{
						id: 2,
						name: '国内',
					},
					{
						id: 3,
						name: '出境',
					},
				],
				isActive: 0,
				contentList: [{
						src: poster,
						title: '深圳-福州-3日',
						list: [
							'D1：深圳-福州，三巷七坊',
							'D2：福州，平潭岛',
							'D3：福州-深圳，海坛古城'
						],
						isstar: true,
						iscollect: true,
					},
					{
						src: poster,
						title: '深圳-福州-3日',
						list: [
							'D1：深圳-福州，三巷七坊',
							'D2：福州，平潭岛',
							'D3：福州-深圳，海坛古城'
						],
						isstar: true,
						iscollect: false,
					},
					{
						src: poster,
						title: '深圳-福州-3日',
						list: [
							'D1：深圳-福州，三巷七坊',
							'D2：福州，平潭岛',
							'D3：福州-深圳，海坛古城'
						],
						isstar: false,
						iscollect: true,
					},
					{
						src: poster,
						title: '深圳-福州-3日',
						list: [
							'D1：深圳-福州，三巷七坊',
							'D2：福州，平潭岛',
							'D3：福州-深圳，海坛古城'
						],
						isstar: false,
						iscollect: false,
					}
				],
				currentListIndex: 0,
			}
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.id); //打印出上个页面传递的参数。
			console.log(option.name); //打印出上个页面传递的参数。
			if(option.type == 'list') {
				this.type = 0 
			} else {
				this.type = 1
			}
		},
		mounted() {
            // const currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
			// wv.setStyle({scalable:true,width:300,height:300})
			// currentWebview.setBounce({position:{top:'100px'},changeoffset:{top:'0px'}}); //动态重设bounce效果
			// currentWebview.setStyle({scalable:true,width:300,height:300, left:'20%',top:'10%'})
		},
		methods: {
			goScenDetail(item, index) {
				uni.navigateTo({
					url: '/pages/scenicdetail/scenicdetail'
				})
			},
			changeDay(index)  {
				console.log('changeDay')
				this.currentDay = index
			},
			
			openclockbox() {
				uni.navigateTo({
					url: '/pages/clockin/clockin'
				})
			},
			mapshow() {
				this.type = 1
			},
			openList() {
				this.type = ''
			},
			openShare() {
				uni.navigateTo({
					url: '/pages/sharePage/sharePage'
				})
			},
			goPage() {
				uni.navigateTo({
					url: '/pages/InternalMessage/InternalMessage'
				})
			},
			goClock() {
				uni.navigateTo({
					url: '/pages/alarm/alarm'
				})
			},
			goSetting() {
				uni.navigateTo({
					url: '/pages/settings/settings'
				})
			},
			handleToday() {
				this.hasMore = true
				this.options = [{
						content: '进贤门',
						time: '08:00-09:00',
					},
					{
						content: '揭阳学宫',
						time: '09:00-12:00',
					},
					{
						content: '罗家老字号青果汁',
						time: '12:00-14:00',
					},
					{
						content: '罗家老字号青果汁',
						time: '12:00-14:00',
					},
				]
				this.activeDay = 0
			},
			changeListIndex(mapIndx) {
				console.log('changeListIndex', mapIndx)
				this.currentListIndex = mapIndx
			},
			
			handleMore() {
				this.options = [
					...this.options,
					{
						content: '进贤门',
						time: '08:00-09:00',
					},
					{
						content: '揭阳学宫',
						time: '09:00-12:00',
					},
					{
						content: '罗家老字号青果汁',
						time: '12:00-14:00',
					},
					{
						content: '罗家老字号青果汁',
						time: '12:00-14:00',
					},
				]
				this.hasMore = false

			},
			handleTomorrow() {
				this.options = []
				this.activeDay = 1
			},
			// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
			chenked(index) {
				this.isActive = index;
				// this.scrollLeft = 0;
				// for (let i = 0; i < index - 1; i++) {
				// 	this.scrollLeft += this.category[i].width
				// };
			},
		}
	}
</script>

<style lang="less" scoped>
	.step_circle2 {
		width: 18rpx;
		height: 18rpx;
		background: #FFFFFF;
		border: 2rpx solid #1076F2;
		border-radius: 50%;
		margin-left: 9rpx;
	}

	.step_line {
		width: 2rpx;
		height: 200%;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		flex: 1;
		border-left: 1rpx dotted #D9DFE6;
	}

	.setp_time {
		color: #777777;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.setp_content {
		color: #080808;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.page {
		// min-height: 421rpx;
		width: 100vw;
		min-height: 100vh;
		background-image: url(../../static/image/home/homebg.png);
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: #fff;
		box-sizing: border-box;

		.topBox {

			display: flex;
			justify-content: space-between;
			margin-bottom: 24rpx;
			align-items: center;
			padding: 0 36rpx 0 40rpx;

			.left {
				width: 126rpx;
				height: 38rpx;
			}

			.right {
				display: flex;

				image {
					width: 42rpx;
					height: 42rpx;
					margin-left: 32rpx;
				}
			}
		}

		.avatorbox {
			margin-bottom: 30rpx;
			display: flex;
			align-items: center;
			padding: 0 40rpx 30rpx 40rpx;

			.avator {
				width: 112rpx;
				height: 112rpx;
				margin-right: 20rpx;
				border: 4rpx solid #FFFFFF;
				border-radius: 50%;
			}

			.right {
				display: flex;
				flex-direction: column;

				// align-items: center;
				.top {
					font-size: 34rpx;
					line-height: 48rpx;
					color: #221715;
					font-weight: bold;
				}

				.bottom {
					display: flex;
					align-items: center;

					// justify-content: center;
					image {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
					}

					text {
						color: #F5AD36;
						font-size: 18rpx;
					}
				}
			}
		}
	}
	
	.covermapbox {
		position: relative;
		width: 100%;
		height: 804rpx;
		box-sizing: border-box;
		.coveroperate {
			position: absolute;
			z-index: 1;
			bottom: 36rpx;
			right: 20rpx;
			width: 136rpx;
			.posi {
				width: 136rpx;
				height: 56rpx;
				background: rgba(0, 0, 0, 0.4);
				border-radius: 8rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 16rpx;
				padding: 12rpx 20rpx;
				text-align: center;
			}
			.lis {
				width: 136rpx;
				height: 56rpx;
				background: rgba(0, 0, 0, 0.4);
				border-radius: 8rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 16rpx;
				padding: 12rpx 20rpx;
				text-align: center;
			}
		}
		.coverweathera {
			position: absolute;
			top: 176rpx;
			z-index: 1;
			width: 444rpx;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 36rpx;
			opacity: 0.8;
			right: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 20rpx;
			.coverweathera-txt {
				font-weight: 400;
				font-size: 28rpx;
				color: #7C7C7C;
				line-height: 40rpx;
			}
			.coverweathera-img {
				width: 32rpx;
				height: 32rpx;
				margin: 0 12rpx;
			}
		}
	}


	.mapbox {
		position: relative;
		width: 100%;
		height: 804rpx;
		box-sizing: border-box;
		
		.operate {
			position: absolute;
			z-index: 1;
			bottom: 36rpx;
			right: 45rpx;
			width: 136rpx;
		
			text {
				width: 136rpx;
				height: 56rpx;
				background: rgba(0, 0, 0, 0.4);
				border-radius: 8rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 16rpx;
			}
		}
		
		.weathera {
			position: absolute;
			top: 176rpx;
			z-index: 1;
			// width: 444rpx;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 36rpx;
			opacity: 0.8;
			right: 45rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 20rpx;
		
			text {
				font-weight: 400;
				font-size: 28rpx;
				color: #7C7C7C;
				line-height: 40rpx;
			}
		
			image {
				width: 32rpx;
				height: 32rpx;
				margin: 0 12rpx;
			}
		}
		
	}

	.mapcontent {
		width: 100%;
		// height: 820rpx;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;

		.mapcontent-title {
			height: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				width: 70rpx;
				height: 8rpx;
				background: #CED2D9;
				border-radius: 4rpx;
			}
		}

		.mapcontent-nav {
			padding: 0 42rpx;
			border-bottom: 2rpx solid #F3F5F7;
			// width: 750rpx;
			height: 100rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;

			.navitem {
				// font-weight: 600;
				font-size: 30rpx;
				color: #1A1A1A;
				line-height: 42rpx;
				margin-right: 50rpx;

				.normal {
					font-weight: normal;
					font-size: 30rpx;
					color: #1A1A1A;
					line-height: 42rpx;
					text-align: center;
				}

				.txtactive {
					width: 76rpx;
					height: 12rpx;
					background: linear-gradient(270deg, #FFFFFF 0%, #017DFF 100%);
					opacity: 0;
				}
			}

			.dayActive {

				.normal {
					font-weight: bold;
				}

				.txtactive {
					opacity: 1;

				}
			}
		}

		.mapcontent-box {
			position: relative;

			.mapline {
				height: 90%;
				border-left: 2rpx dashed #CED2D9;
				position: absolute;
				top: 20rpx;
				left: 58rpx;
				// z-index: -1;
			}

			.mapitem-header {
				margin: 0 40rpx;
				height: 112rpx;
				background: #F5F7F9;
				border-radius: 16rpx;
				padding: 20rpx 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;

				.left {
					font-weight: 400;
					font-size: 28rpx;
					color: #1A1A1A;
					line-height: 40rpx;
				}

				.right {
					image {
						width: 48rpx;
						height: 48rpx;
						margin-left: 24rpx;
					}
				}

				.tips {
					width: 36rpx;
					height: 36rpx;
					background: #DBEBFC;
					border-radius: 16rpx 0rpx 16rpx 0rpx;
					font-weight: bold;
					font-size: 24rpx;
					color: #006FF6;
					line-height: 36rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					left: 0rpx;
					top: 0;
				}
			}

			.mapitem-body {
				height: 66rpx;
				display: flex;
				align-items: center;
				margin-left: 44rpx;

				image {
					width: 22rpx;
					height: 22rpx;
					margin-right: 8rpx;
				}

				text {
					font-weight: 400;
					font-size: 24rpx;
					color: #888888;
					line-height: 32rpx;
				}
			}
		}
	}




	.tipbox {
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		position: relative;
		z-index: 1;
		top: -12rpx;

		min-height: 510rpx;
		// margin: 0 20rpx 20rpx;
		// margin-top: -10rpx;
		padding: 40rpx 42rpx 0 42rpx;
		background-color: #FFFFFF;

		.weather1 {
			border-bottom: 2rpx solid #F3F5F7;
			z-index: 1;
			// width: 444rpx;
			// height: 72rpx;
			background: #FFFFFF;
			border-radius: 36rpx;
			opacity: 0.8;
			// right: 20rpx;
			display: flex;
			align-items: center;
			// justify-content: center;
			margin-bottom: 20rpx;
			padding-bottom: 22rpx;

			text {
				font-weight: 400;
				font-size: 28rpx;
				color: #7C7C7C;
				line-height: 40rpx;
			}

			image {
				width: 32rpx;
				height: 32rpx;
				margin: 0 12rpx;
			}
		}

		.tipbox-nav {
			// padding: 30rpx 40rpx 20rpx 40rpx;
			margin-bottom: 20rpx;
			// width: 750rpx;
			// height: 100rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;

			.navitem {
				font-weight: 600;
				font-size: 30rpx;
				color: #1A1A1A;
				line-height: 42rpx;
				margin-right: 50rpx;

				.normal {

					font-size: 30rpx;
					color: #1A1A1A;
					line-height: 42rpx;
					text-align: center;
				}

				.txtactive {
					width: 76rpx;
					height: 12rpx;
					background: linear-gradient(270deg, #FFFFFF 0%, #017DFF 100%);
					opacity: 0;
				}
			}

			.dayActive {

				.normal {
					font-weight: bold;
				}

				.txtactive {
					opacity: 1;

				}
			}
		}

		.mapcontent-box {
			position: relative;

			.mapline {
				height: 90%;
				border-left: 2rpx dashed #CED2D9;
				position: absolute;
				top: 20rpx;
				left: 38rpx;
				z-index: -1;
			}

			.mapitem-header {
				// margin: 0 40rpx;
				min-height: 156rpx;
				background: #F5F7F9;
				border-radius: 16rpx;
				padding: 36rpx 30rpx 24rpx 30rpx;
				display: flex;
				flex-direction: column;
				// align-items: center;
				justify-content: space-between;
				position: relative;

				.titlebox {
					display: flex;
					margin-bottom: 16rpx;

					.left {
						font-weight: 400;
						font-size: 28rpx;
						color: #1A1A1A;
						line-height: 40rpx;
					}

					.right {
						image {
							width: 48rpx;
							height: 48rpx;
							margin-left: 24rpx;
						}
					}
				}

				.imgs {
					display: flex;
					align-items: center;

					image {
						width: 100rpx;
						height: 100rpx;
						margin-right: 18rpx;
						margin-bottom: 4rpx;
					}
				}

				.maptips {
					font-size: 24rpx;
					color: #777777;
					line-height: 34rpx;
				}

				.clockbox {
					position: absolute;
					top: 28rpx;
					right: 24rpx;
					z-index: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 144rpx;
					height: 56rpx;
					background: linear-gradient(270deg, #0187F5 0%, #2DCCC2 100%);
					border-radius: 28rpx;

					image {
						width: 36rpx;
						height: 36rpx;
						margin-right: 12rpx;
					}

					text {
						font-weight: 400;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 40rpx;
					}
				}

				.tips {
					width: 36rpx;
					height: 36rpx;
					background: #DBEBFC;
					border-radius: 16rpx 0rpx 16rpx 0rpx;
					font-weight: bold;
					font-size: 24rpx;
					color: #006FF6;
					line-height: 36rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					left: 0rpx;
					top: 0;
				}
			}

			.mapitem-body {
				height: 66rpx;
				display: flex;
				align-items: center;
				margin-left: 44rpx;

				image {
					width: 22rpx;
					height: 22rpx;
					margin-right: 8rpx;
				}

				text {
					font-weight: 400;
					font-size: 24rpx;
					color: #888888;
					line-height: 32rpx;
				}
			}
		}
	}


	.toptips {
		background: linear-gradient(270deg, #0187F5 0%, #2DCCC2 100%);
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		height: 112rpx;
		// padding-bottom: 6rpx;
		padding-left: 20rpx;
		display: flex;
		align-items: center;
		// margin: 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;

		// text {
		// 	font-weight: 500;
		// 	font-size: 24rpx;
		// 	color: #FFFFFF;
		// 	line-height: 34rpx;
		// 	margin-right: 32rpx;
		// }
		.left {
			display: flex;
			align-items: center;

			.normal {
				font-weight: bold;
				font-size: 40rpx;
				color: #FFFFFF;
				line-height: 56rpx;
			}

			.splite {
				width: 30rpx;
				height: 2rpx;
				background: #FFFFFF;
			}

			.middle {
				width: 100rpx;
				height: 44rpx;
				background: #FFFFFF;
				border-radius: 22rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #17A9DB;
				line-height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.right {
			display: flex;
			align-items: center;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 12rpx;
			}

			text {
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 32rpx;
			}
		}
	}
	
	
	.weather1 {
		border-bottom: 2rpx solid #F3F5F7;
		z-index: 1;
		// width: 444rpx;
		// height: 72rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		opacity: 0.8;
		// right: 20rpx;
		display: flex;
		align-items: center;
		// justify-content: center;
		margin-bottom: 20rpx;
		padding-bottom: 22rpx;
	
		text {
			font-weight: 400;
			font-size: 28rpx;
			color: #7C7C7C;
			line-height: 40rpx;
		}
	
		image {
			width: 32rpx;
			height: 32rpx;
			margin: 0 12rpx;
		}
	}
	
	.weather0 {
		border-bottom: 2rpx solid #F3F5F7;
		z-index: 1;
		// width: 444rpx;
		// height: 72rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		opacity: 0.8;
		// right: 20rpx;
		display: flex;
		align-items: center;
		// justify-content: center;
		margin-bottom: 20rpx;
		padding-bottom: 22rpx;
	
		text {
			font-weight: 400;
			font-size: 28rpx;
			color: #7C7C7C;
			line-height: 40rpx;
		}
	
		image {
			width: 32rpx;
			height: 32rpx;
			margin: 0 12rpx;
		}
	}
	
	.listactive {
		border: 2rpx solid #006FF6;
	}
	// background: #F5F7F9;
	// border-radius: 16rpx;
	
	
	.navitem {
		// font-weight: 600;
		font-size: 30rpx;
		color: #1A1A1A;
		line-height: 42rpx;
		margin-right: 50rpx;
		display: flex;
		flex-direction: column;
	
		.normal {
			font-weight: normal;
			font-size: 30rpx;
			color: #1A1A1A;
			line-height: 42rpx;
			text-align: center;
		}
	
		.txtactive {
			width: 76rpx;
			height: 12rpx;
			background: linear-gradient(270deg, #FFFFFF 0%, #017DFF 100%);
			opacity: 0;
		}
	}
	
	.txtactive {
		width: 76rpx;
		height: 12rpx;
		background: linear-gradient(270deg, #FFFFFF 0%, #017DFF 100%);
		opacity: 0;
	}
	
	.dayActive {
	
		.normal {
			font-weight: bold;
		}
	
		.txtactive {
			opacity: 1;
	
		}
	}
	
	
	
	
	

</style>